<template>
<div>
    <div class="top-img">
        <img src="../../assets/img/头部.png" alt="">
    </div>
    <div class="hm-top-site">
        <img src="../../assets/img/定位.png" alt="">
        <span>金华职业技术学院东实训楼</span>
        <img src="../../assets/img/3.1铃铛.png" alt="">
    </div>
    <div class="hm-serch">
        <img src="../../assets/img/放大镜.png" alt="">
        <input value="山姆会员商店优惠商品" />
    </div>
    <div class="hm-big-img">
        <img src="../../assets/img/11.png" alt="">
    </div>
    <div class="hm-market">
        <div class="hm-item">
            <img src="../../assets/img/超市.png" alt="">
            <span>超市便利</span>
        </div>
        <div class="hm-item">
            <img src="../../assets/img/菜市场.png" alt="">
            <span>菜市场</span>
        </div>
        <div class="hm-item">
            <img src="../../assets/img/水果店.png" alt="">
            <span>水果店</span>
        </div>
        <div class="hm-item">
            <img src="../../assets/img/鲜花.png" alt="">
            <span>鲜花绿植</span>
        </div>
        <div class="hm-item">
            <img src="../../assets/img/医药健康.png" alt="">
            <span>医药健康</span>
        </div>
    </div>
    <div class="hm-market">
        <div class="hm-item">
            <img src="../../assets/img/家居.png" alt="">
            <span>家居时尚</span>
        </div>
        <div class="hm-item">
            <img src="../../assets/img/蛋糕.png" alt="">
            <span>烘培蛋糕</span>
        </div>
        <div class="hm-item">
            <img src="../../assets/img/签到.png" alt="">
            <span>签到</span>
        </div>
        <div class="hm-item">
            <img src="../../assets/img/大牌免运.png" alt="">
            <span>大牌免运</span>
        </div>
        <div class="hm-item">
            <img src="../../assets/img/红包.png" alt="">
            <span>红包套餐</span>
        </div>
    </div>
    <h2>附近店铺</h2>
    <div class="hm-surpermarket">
        <div class="hm-part">
            <router-link :to="'/store'"><div class="hm-part-left">
                <img src="../../assets/img/沃尔玛.png" alt="">
            </div></router-link>
            <div class="hm-part-right">
                <span class="hm-text1">沃尔玛</span>
                <span class="hm-text2">月售1万+  起送￥0  基础运费￥5</span>
                <span class="hm-text3">VIP尊享满98减4元运费券（每月3张）</span>
            </div>
        </div>
        <div class="hm-part">
            <div class="hm-part-left">
                <img src="../../assets/img/山姆.png" alt="">
            </div>
            <div class="hm-part-right">
                <span class="hm-text1">山姆会员商店</span>
                <span class="hm-text2">月售2千+  起送￥0  基础运费￥5</span>
                <span class="hm-text3">联合利华洗护满10减5</span>
            </div>
        </div>
    </div>
    <div class="item" >
        <router-link :to="'/home'"><div class="main"><img src="../../../public/img/sy.png">首页</div></router-link>
        <router-link :to="'/shoppingcart'"><div class="main"><img src="../../../public/img/gwc.png">购物车</div></router-link>
        <router-link :to="'/order'"><div class="main"><img src="../../../public/img/dd.png">订单</div></router-link>
        <router-link :to="'/mine'"><div class="main"><img src="../../../public/img/wd.png">我的</div></router-link>
      </div>
</div>
</template>
<style>
 .item{
    display: flex;
    justify-content: space-around;
    width: 100vw;
    padding: 10px;
    position: absolute;
    bottom: -40px;
    z-index: 999;
    background-color: #ddd;
  }
.item .main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
 .item a{
    color: rgb(13, 189, 233);
    text-decoration: none;
    font-size: 9px;
  }
  .item img{
    width: 25px;
  }
.top-img img{
    width: 100vw;
}
.hm-top-site img{
    width: 20px;
}
.hm-top-site{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hm-serch{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid gray;
    width: 70vw;
    border-radius: 10px;
    margin-left: 10vw;
}
.hm-serch img{
    width: 15px;
}
.hm-serch input{
    border: none;
    color: #ddd;
}
.hm-big-img img{
    width: 90vw;
    margin-top: 10px;
    margin-left: 20px;
}
.hm-market{
    display: flex;
    justify-content: space-between;
    width: 90vw;
    margin-left: 20px;
}
.hm-market img{
    width: 50px;
}
.hm-item{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hm-text1{
    font-size: 20px;
}
.hm-text2{
    font-size: 15px;
    margin-top: 5px;
}
.hm-text3{
    font-size: 13px;
    color: red;
    margin-top: 5px;
}
.hm-part-right{
    display: flex;
    flex-direction: column;
}
.hm-part img{
    width: 70px;
}
.hm-part{
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
}
</style>